<template>
  <div class="app-container">
    <el-scrollbar style="height: 100%;">
      <div class="dataPage-box">
         <el-tabs v-model="activeName">
          <el-tab-pane label="数据分类" name="first">数据分类</el-tab-pane>
          <el-tab-pane label="传感器" name="second">传感器</el-tab-pane>
          <el-tab-pane label="发布时间" name="third">发布时间</el-tab-pane>
          <el-tab-pane label="业务系统" name="fourth">业务系统</el-tab-pane>
          <el-tab-pane label="三方数据" name="fourths">三方数据</el-tab-pane>
        </el-tabs>
        <div class="new-body">
          <div v-for="(item,index) in newList" :key="index">
            <p class="new-p">
                <div class="newImg"></div>
                <span class="newSpan">{{item.name}}</span>
            </p>
            <div class="new-flon">
              <el-button v-for="(val,index) in item.list" :key="index">{{val.name}}</el-button>
                <!-- <span></span> -->
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$store.commit('rdefaultActive', 'classification')
    },

    data() {
      return {    
        activeName: 'first',
        newList:[{
          name:"档案数据",
          list:[{
            name:"水务基础档案（178）"
          },{
            name:"水厂基础档案（83）"
          },{
            name:"加压泵基础档案（337）"
          },{
            name:"设施档案（732）"
          },{
            name:"水表档案（204）"
          },{
            name:"水表档案（204）"
          }]
        },{
          name:"监测数据",
          list:[{
            name:"水务基础档案（178）"
          },{
            name:"水厂基础档案（83）"
          },{
            name:"管网监测数据（337）"
          },{
            name:"计量(水表)监测数据（732）"
          }]
        },{
          name:"业务数据",
          list:[{
            name:"营业数据（178）"
          },{
            name:"客服数据（83）"
          },{
            name:"漏控数据（337）"
          },{
            name:"报装数据（732）"
          },{
            name:"财务数据（1950）"
          },{
            name:"水表档案（204）"
          },{
            name:"声像档案（10387）"
          }]
        },{
          name:"空间数据",
          list:[{
            name:"管网数据（178）"
          },{
            name:"地形数据（83）"
          },]
        },{
          name:"预测分析",
           list:[{
            name:"生产分析（178）"
          },{
            name:"营销分析（83）"
          },{
            name:"客服分析（337）"
          },{
            name:"管网指标分析（732）"
          },{
            name:"设备运行分析（1950）"
          },{
            name:"工程分析（204）"
          },{
            name:"财务分析（10387）"
          }]
        }]
      }
    },
    methods: {}
  }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.new-body{
  margin-top: 20px;
  .newImg{
      width: 6px;
      height: 28px;
      display: -webkit-inline-box;
      background: #0064b4;
  }
  .newSpan{
      top: -9px;
      position: relative;
      font-size: 16px;
      font-weight: 700;
      margin-left: 10px;
      color: #0064b4;
  }
  .new-flon{
    button{
      display: inline-block;
      margin: 0 0 15px 10px;
    }
  }
}
</style>
